<template>
  <div class="hot">
    <div class="hot-top">
        <span>本周热门榜单</span>
        <span>全部榜单 <i>></i> </span>
    </div>
    <ul class="hot-ul">
        <li v-for="item in hotList" :key="item.id" @click="rotpus">
            <img :src="item.imgurl">
            <p class="textovhid">{{item.tiele}}</p>
            <p>
                <span>￥{{item.mnny}}</span>起
            </p>
        </li>
    </ul>
  </div>
</template>


<script>

export default {
  data () {
    return {
    
    }
  },
  props: ['hotList'],
  methods: {
    rotpus() {
      this.$router.push('detail');
    }
  }
}

</script>


<style lang="less" scoped>
  .hot {
    padding: 0.05rem;

    .hot-top { 
      display: flex;
      justify-content: space-between;
      line-height: 0.6rem;
      font-size: 0.14rem;
    }
    .hot-ul {
        height: 1.4rem;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        
        >li {
            height: 1rem;
            width: 1rem;
            text-align: center;
            font-size: 0.14rem;
            display: inline-block;
            margin-left: 0.05rem;
            
            >img {
                width: 100%;
                height: 100%;
            }
            span {
                color: #f60;
            }
        }
    }
  }
</style>
